<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="../sass/hyzc.css">
</head>
<body>
    <div class="wrap">
        <div class="nav">
            <div class="nav-left">
                <a href="#"><img src="../image/logo.jpg" alt=""></a>
            </div>
        <div class="nav-right">
            <div class="right-one">
                <a href="#">首页</a>
                <a href="#">分类</a>
                <a href="#">有路联盟</a>
                <a href="#">信用评价</a>
                搜索书名：
                <input type="text">
                <input type="button" class="btn1" value="搜索">
            </div>
            <div class="right-two">
                
                <div>
                    欢迎您，访客！
                    [<a href="#">登录</a>]
                    <a href="#">免费注册</a>
                    |
                    <a href="#">网站购物车</a>
                    |
                    <a href="#">店铺购物车</a>
                    |
                    <a href="#">我的有路</a>
                    |
                    <a href="#">客服中心</a>
                    |
                    <a href="#">帮助</a>
                </div>
            </div>
        </div>
        </div>
        <div class="lead">
            当前位置：
            <a href="#">有路网</a>&gt;&gt;
            <a href="#">我的有路</a>&gt;&gt;
            会员注册
        </div>
        <div class="content">
            <div class="content1">
                有路网提供：200万种图书、新书比价、免费加盟店、网店自助代购、有路联盟。
            </div>
            <div class="content2">
                支付宝 财付通 网上银行 银行汇款多种支付方式。
            </div>
            <div class="content3">
                平邮 快递 EMS 货到付款 自取 多重送货方式。
            </div>
            <div class="content4">
                立刻注册会员享受 淘书 出售 求购 交易乐趣！
            </div>
        </div>
        <div class="vip">
            <div class="vip-title">
                <img src="../image/people.gif" alt="">有路网会员注册：
            </div>
            <div class="vip-content">
                <div class="a1">请输入您的Email:</div>
                <div class="a2"><input type="text"></div>
                <div class="a3 gg1">
                    请填写您常用的Emai地址作为您在有路网的帐号,同时我们也会给这个地址发送帐户信息、密码修改信息、订单通知等。
                    <br>    
                    没有电子邮件？推荐使用免费的  
                    <a href="http://mail.163.com" tabindex="-1" target="_blank">网易邮箱</a>
                    <a href="http://mail.qq.com" tabindex="-1" target="_blank">QQ邮箱</a>。        
                </div>
            </div>
            <div class="vip-content">
                <div class="a1">请输入您的密码：</div>
                <div class="a2"><input type="text"></div>
                <div class="a3 gg1">
                    您登录有路网的密码，由6-16个字符组成。
                </div>
            </div>
            <div class="vip-content">
                <div class="a1">请重复输入您的密码：</div>
                <div class="a2"><input type="password"></div>
                <div class="a3 gg1">
                    请再输入一遍您上面输入的密码。
                </div>
            </div>
            <div class="vip-content">
                <div class="a1">请输入您的昵称：</div>
                <div class="a2"><input type="text"></div>
                <div class="a3 gg1">
                    昵称可随时修改，长度限制：2-20。
                </div>
            </div>
            <input type="button" value="请填写您的注册信息">
        </div>
    </div>
    <script>
        // 获取注册接口
        let degAPI="http://jx.xuzhixiang.top/ap/api/reg.php";
        // 获取input
        let ips= document.querySelectorAll(".vip input");
         console.log(ips);
        ips[4].onclick=function(){
          let username=ips[0].value;
          let password=ips[1].value;
          // 调用 ajax函数 传入参数 当参数不是一个的时候 写成对象的方式
          ajax({
               url:degAPI,
               type:"get",
               data:{
                 username,
                 password
               },
               success(res) {
                let pcent=res.msg;
              //  console.log(res.code);

                 location.href="leg.html";
               
                }
            
                
          })
        }
        function ajax(obj){
          //  结构对象
        let {url,type,data,success}=obj;
        // 先确定以什么类型提交
        if(type=="get"){
          // url 要写成 接口 加 请求内容 写成 username=内容&password=内容
          // 所以应该先遍历对象 用for in
          // 将他们放到数组里  因为只有放到数组里才可以 用join 把数组里的对象链接成字符串
          let arr=[];
          for(let key in data){
            let str=key+"="+data[key]
            arr.push(str);
          }
          let arrStr=arr.join("&");
          url=url+"?"+arrStr;
          // 创建ajax对象
           let xml= new XMLHttpRequest();
           xml.open(type,url);
           xml.send();
           xml.onload=function(){
            if(xml.status==200){
              let aaa=JSON.parse(xml.responseText);
           
              success(aaa);
            }
           }

        }
        }


      </script>
</body>
</html>